<template>
  <view class="comment-input-area">
    <view class="input-wrapper">
      <input 
        class="comment-input" 
        type="text" 
        v-model="inputContent"
        :placeholder="placeholder"
        confirm-type="send"
        @confirm="handleSubmit"
        :disabled="disabled"
      />
    </view>
    
    <view class="anonymous-switch">
      <text>匿名</text>
      <switch 
        :checked="anonymous" 
        @change="handleAnonymousChange"
        color="#007aff"
        style="transform: scale(0.7);"
      />
    </view>
    
    <button 
      class="send-btn" 
      @click="handleSubmit"
      :disabled="disabled || !inputContent.trim()"
    >发送</button>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  isAnonymous: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '发表评论...'
  }
});

const emit = defineEmits(['update:content', 'update:isAnonymous', 'submit']);

// 本地状态
const inputContent = ref(props.content);
const anonymous = ref(props.isAnonymous);

// 监听输入变化
watch(inputContent, (newVal) => {
  emit('update:content', newVal);
});

// 监听匿名状态变化
watch(anonymous, (newVal) => {
  emit('update:isAnonymous', newVal);
});

// 处理匿名开关变化
const handleAnonymousChange = (e) => {
  anonymous.value = e.detail.value;
};

// 提交评论
const handleSubmit = () => {
  if (props.disabled || !inputContent.value.trim()) return;
  emit('submit');
};
</script>

<style lang="scss" scoped>
.comment-input-area {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #e8e8e8;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  
  .input-wrapper {
    flex: 1;
    height: 40px;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 0 16px;
    margin-right: 12px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .comment-input {
      width: 100%;
      height: 100%;
      font-size: 15px;
    }
  }
  
  .anonymous-switch {
    display: flex;
    align-items: center;
    margin-right: 10px;
    
    text {
      font-size: 12px;
      color: #666666;
      margin-right: 4px;
    }
  }
  
  .send-btn {
    width: 70px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #ffffff;
    background-color: #007aff;
    border-radius: 20px;
    padding: 0;
    font-weight: 500;
    box-shadow: 0 3px 8px rgba(0, 122, 255, 0.25);
    
    &:disabled {
      background-color: #cccccc;
      box-shadow: none;
    }
    
    &:active {
      transform: scale(0.96);
      box-shadow: 0 1px 4px rgba(0, 122, 255, 0.2);
    }
  }
}
</style>
